<template>
    <van-tabs v-model:active="active" animated :stop-propagation="false">
        <van-tab v-for="index in nav" :title="index.text" :key="index.id" @click="changeIndex(index.id)">
           
        </van-tab>
    </van-tabs>
</template>

<script lang="ts">
import { ref, onMounted, reactive,toRaw } from 'vue';
// 调用接口
import { getNavList } from "@/api/request";
import { useRoute,useRouter} from 'vue-router';
export default {

    setup() {
        // const router = useRouter();
        const router = useRouter();
        console.log("@",router);//相当于this.$router
        console.log(router.currentRoute);//相当于this.$route
        const active = ref(0);
        // let nav = reactive({
        //     navlist:[]
        // })'

        // 标记数据格式
        interface INavItem {
            id: string
            text: string
        }
        const nav = ref<INavItem[]>([])


        // vue3的reactive不能直接给proxy赋值，不然会失去响应式，而ref却不会。
        getNavList().then((res) => {
            nav.value = res.data.result;
            console.log(res.data.result); 
        })
        function changeIndex(id:string){
            console.log(id);
            
        }

        
        return { active, nav ,changeIndex};
    },
};
</script>